﻿<!DOCTYPE HTML> 
<html>
    <head>
    </head>
    <body>
		<div id="area">
			<fieldset id="list" style="border:0;padding:3px;">
				
			</fieldset>
		</div>
		<script type='text/template' id='listTemplate'>
            {$
				<legend style="color: #666699;font-family: verdana,tahoma,arial;font-size: 15px;font-weight: bold;">拖动任意图片</legend>
			$}
			for (var item in data) {
                {$
					<img src = "{%data[item].url%}" height="50" width="50" name= "{%data[item].name%}"/>
                $}
            }
        </script>
		<script type='text/javascript' src='src/yaya-template.js'></script>
        <script type='text/javascript'>
			var jsonData = {
				yy: {
					name: "月月",
					url: "images/heads/yy.jpg"
				},
				yf: {
					name: "杨飞",
					url: "images/heads/yf.jpg"
				},
				xl: {
					name: "小丽",
					url: "images/heads/xl.jpg"
				},
				xt: {
					name: "小童",
					url: "images/heads/xt.jpg"
				}
			}, 
			dragObject = null,
			mouseOffset = null;
			window.onload = function() {
                var template = YayaTemplate('listTemplate'),
					list = document.getElementById("list");
				document.onmouseup = mouseUp;
				document.onmousemove = mouseMove;
				list.innerHTML = template.render({"data": jsonData});
				for (var i=0, childs=list.childNodes, len=childs.length; i<len; i++) {
					if (childs[i].nodeName.toUpperCase() == "IMG") {
						makeClickable(childs[i]);
					}
				}
            }
			function mouseUp() {
				dragObject = null;
			}
			function mouseMove(e) {
				var ev = e || window.event,
					mousePos = mouseCoords(ev);
			    if(dragObject){
					dragObject.style.position = 'absolute';
					dragObject.style.top = mousePos.y - mouseOffset.y + "px";
					dragObject.style.left = mousePos.x - mouseOffset.x + "px";
					return false;
				}
			}
			function getMouseOffset(target, ev) {
				var docPos = getPosition(target),
					mousePos = mouseCoords(ev);
				return {
					x: mousePos.x - docPos.x, 
					y: mousePos.y - docPos.y
				};
			}
			function getPosition(e) {
				var left = 0,
					top = 0;
				while (e.offsetParent) {
					left += e.offsetLeft;
					top += e.offsetTop;
					e = e.offsetParent;
				} 
				left += e.offsetLeft;
				top += e.offsetTop;
				return {
					x: left,
					y: top
				};
			}
			function makeClickable(object) {
				if (!object) return;
				object.onmousedown = function(e){
					var ev = e || window.event;
					dragObject = this;
					mouseOffset = getMouseOffset(this, ev);
					return false;
				}
			}
			function mouseCoords(e) {
				if (e.pageX) {
					return {
						x: e.pageX,
						y: e.pageY
					}
				}
				return {
					x: e.clientX + document.body.scrollLeft - document.body.clientLeft,
					y: e.clientY + document.body.scrollTop -  document.body.clientTop
				}
			}
        </script>
    </body>
</html>